import React, {useEffect, useState} from "react";
import {Layout} from "antd";
import Header from "../../components/Header";
import Sidebar from "../../components/Sidebar";
import {MainRoutes} from "../../router";
import Events from "../../components/Events";
import styles from "./index.module.css";

const Main = (props) => {

	const [collapsed,setCollapsed] = useState(false)

	const onCollapse = () => {
		setCollapsed(!collapsed)
	}

	useEffect(()=>{
		Events.on("collapse", onCollapse);
		return () => {
			Events.off("collapse", onCollapse);
		}
	},[])

	return (
		<div className={styles.main}>
			<Layout className={styles.mainContent}>
				<Layout.Sider collapsed={collapsed}>
					<Sidebar collapsed={collapsed} />
				</Layout.Sider>
				<Layout>
					<Header />
					<Layout.Content className={styles.mainRight}>
						<MainRoutes />
					</Layout.Content>
				</Layout>
			</Layout>
		</div>
	);
}

export default Main;
